<template>
    <div class="pageWrapper">
        <SearchBar @onSearch="handleSearch" @childFn="resetForm">
            <SearchBarItem label="商品编号(必填)：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.productCode"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="主订单号：" :labelLg="8">
                <Input
                    type="text"
                    v-model="dataModule.orderId"
                    placeholder="请输入"
                    clearable
                />
            </SearchBarItem>
            <SearchBarItem label="交易时间：" :labelLg="8">
                <DatePicker
                    type="daterange"
                    ref="payTime"
                    split-panels
                    transfer
                    placeholder="起始时间"
                    @on-change="payTime"
                ></DatePicker>
            </SearchBarItem>
            <SearchBarItem label="清分渠道：" :labelLg="8">
                <Select
                    v-model="dataModule.payChannel"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in selectChannel"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>

             <SearchBarItem label="是否有清分规则：" :labelLg="8">
                <Select
                    v-model="dataModule.is_clear_rule"
                    placeholder="请选择"
                    :clearable="isClear"
                >
                    <Option
                        :value="item.key"
                        v-for="(item, key) in selectclearRule"
                        :key="key"
                        >{{ item.value }}</Option
                    >
                </Select>
            </SearchBarItem>
        </SearchBar>

        <div class="">
            <div class="title">
                <div class="ivu-divider ivu-divider-vertical ivu-divider-default"></div>
                <span data-v-7c19b825="">账单列表</span>
            </div>
            <Table border size="small" :columns="billColumns" :data="billData" @on-selection-change="selectBillRow"></Table>
            <br />
            <Row>
                <Col span="12" offset="11">
                    <Button type="primary" @click="loadMore" :disabled="isDisabledloadBtn || billData.length < 10" >加载更多</Button>
                </Col>
            </Row>
        </div>

        <Divider></Divider>

        <RadioGroup v-model="ruleIndex" :style="{ width: '100%' }">
            <div class="title">
                <div class="ivu-divider ivu-divider-vertical ivu-divider-default"></div>
                <span data-v-7c19b825="">规则列表</span>
            </div>
            <Table border size="small" :columns="ruleColumns" :data="ruleData"></Table>
        </RadioGroup>

        <Divider></Divider>

        <div class="title">
            <div class="ivu-divider ivu-divider-vertical ivu-divider-default"></div>
            <span data-v-7c19b825="">操作</span>
        </div>
        <Button type="primary" @click="handlerMatch">匹配规则</Button>
        <Button @click="goBack">返回</Button>
    </div>
</template>
<script>
import {
    Button,
    Input,
    Modal,
    Message,
    Form,
    FormItem,
    DatePicker,
    Select,
    Option,
    RadioGroup,
    Radio,
    Table,
    Col,
    Row,
    Divider
} from "view-design";
import SearchBar from "@/components/SearchBar";
import { namespace } from "../Module/clearingAbnormalModule";
import Authc from "@/components/Authc";
import config from "@/utils/config";
import appService from "@/utils/appService";
export default {
    name: "clearingAbnormalMatch",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        Authc,
        Button,
        Input,
        Modal,
        Message,
        Form,
        FormItem,
        DatePicker,
        Select,
        Option,
        RadioGroup,
        Radio,
        Table,
        Col,
        Row,
        Divider
    },
    data() {
        return {
            requireUrl: "",
            namespace: namespace,
            isClear: true,
            loading: true,
            modal1: false, //批量处理弹窗
            ruleIndex: "", //选择的规则索引
            stateList: [],
            dataModule: {}, //查询条件
            selectChannel: [], /** 清分渠道字典 **/
            billSelectData: [] /** 账单选中的数据 **/,
            currentPage: 1 /** 用来控制加载更新 **/,
            isDisabledloadBtn: false /** 控制加载更多按钮 **/,
            selectclearRule: [
                {
                    key: '0',
                    value: '否'
                },
                {
                    key: '1',
                    value: '是'
                }
            ],
            billColumns: [
                {
                    type: "selection",
                    align: "center",
                    minWidth: 55
                },
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    minWidth: 80
                },
                {
                    title: "子订单号",
                    key: 'subOrderId',
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "主订单号",
                    key: "orderId",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "商品名称",
                    key: "productName",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "商品编号",
                    key: "productCode",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "清分渠道",
                    key: "payChannelCodeCn",
                    align: "center",
                    minWidth: 173
                },
                {
                    title: "清分规则",
                    key: "clearRuleCode",
                    align: "center",
                    minWidth: 150
                },
                {
                    title: "核销时间",
                    key: 'verifiedTime',
                    align: "center",
                    minWidth: 200
                }
            ],
            billData: [],  /** 账单列表数据 **/
            ruleColumns: [
                {
                    align: "center",
                    minWidth: 60,
                    render(h, data) {
                        return h(Radio, {
                            attrs: {
                                label: data.index
                            },
                            style: {
                                overflow: "hidden",
                                width: "16px"
                            }
                        });
                    }
                },
                {
                    title: "序号",
                    type: "index",
                    align: "center",
                    minWidth: 90
                },
                {
                    title: "规则名称",
                    align: "center",
                    key: "ruleName",
                    minWidth: 200
                },
                {
                    title: "规则类型",
                    key: "ruleTypeCn",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "结算类型",
                    key: "settlementTypeCn",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "状态",
                    key: "settlementStatusCn",
                    align: "center",
                    minWidth: 200
                },
                {
                    title: "规则生效时间",
                    key: "effectiveDate",
                    align: "center",
                    minWidth: 262
                },
                {
                    title: "规则失效时间",
                    key: "expireDate",
                    align: "center",
                    minWidth: 262
                }
            ],
            ruleData: [] /** 清分规则列表数据 **/
        };
    },
    created() {
        this.getDictionary();
    },
    mounted() {
        setTimeout(() => {
            this.loading = false;
        }, 1000);
    },
    methods: {
        handleSearch() {
            if( !this.dataModule.productCode ) {
                this.$Message.error({
                    content: '商品编号必填，请输入'
                });
                return;
            }
            this.getRuleList();
            this.getBillList();
        },
        /** 获取字典 **/
        async getDictionary(){
            try {
                let res = await this.$store.dispatch(`${namespace}/getMerchantSearchKey`);
                this.selectChannel = res.data.data.payChannel;
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        /** 获取清分规则列表 **/
        async getRuleList(){
            try {
                let obj = {
                    ...this.dataModule,
                    currentPage: 1,
                    pageSize: 100
                }
                let res = await this.$store.dispatch(`${namespace}/getRuleList`, obj);
                this.ruleData = res.data.data.list;
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 获取账单列表 **/
        async getBillList(){
            try {
                this.currentPage = 1;
                let obj = {
                    ...this.dataModule,
                    currentPage: 1,
                    pageSize: 50,
                    isException: 1
                }
                let res = await this.$store.dispatch(`${namespace}/getBatchBill`, obj);
                this.billData = res.data.data.list;
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 加载更多 **/
        async loadMore() {
            try {
                if( !this.dataModule.productCode ) {
                    this.$Message.error({
                        content: '商品编号必填，请输入'
                    });
                    return;
                }
                this.isDisabledloadBtn = true; /** 每次请求都禁止按钮点击 **/
                let obj = {
                    ...this.dataModule,
                    currentPage: ++this.currentPage,
                    pageSize: 50,
                    isException: 1
                }
                /** 因为不是翻页，所以重新写了一个列表的请求 **/
                let res = await this.$store.dispatch(`${namespace}/getBatchBill`, obj);
                let listData = res.data.data.list;
                if (listData.length != 0) {
                    this.billData = this.billData.concat(res.data.data.list);
                } else {
                    --this.currentPage;
                }
                this.isDisabledloadBtn = false;
            } catch (error) {
                this.$Message.error({
                    content: error
                });
            }
        },
        /** 清空事件； **/
        resetForm() {
            this.$set(this.dataModule, 'productCode', '');
            this.$set(this.dataModule, 'orderId', '');
            this.$set(this.dataModule, 'payChannel', '');
            this.$set(this.dataModule, 'is_clear_rule', '')
            /** 清空时间选择 **/
            this.$refs["payTime"].handleClear();
        },
        /** 交易时间 **/
        payTime(date, type) {
            this.dataModule.payTimeBegin = date ? date[0] : "";
            this.dataModule.payTimeEnd = date ? date[1] : "";
        },
        /** 选中的账单列表 **/
        selectBillRow(data){
            this.billSelectData = data;
        },
        /** 处理比配 **/
        async handlerMatch(data) {
           try {
               if( this.billSelectData.length == 0 ) {
                   this.$Message.error({
                        content: '请选择需要匹配的账单'
                    });
                    return;
               }

               if( !(this.ruleIndex+ '').length) {
                   this.$Message.error({
                        content: '请选择需要匹配的规则'
                    });
                    return;
               }
                let obj = {
                    ruleCode: this.ruleData[this.ruleIndex].ruleCode,
                    subOrderIds: this.billSelectData.map(item => item.subOrderId)
                };
                await this.$store.dispatch(`${namespace}/postMatchingRule`, obj)
                 this.$Message.success({
                    content: '操作成功'
                });
                setTimeout(()=>{
                    this.$router.push({
                        path: '/settlement/admin/SettlementCenter/clearingAbnormal'
                    });
                }, 1000);
           } catch (error) {
                this.$Message.error({
                    content: error
                });
           }
        },
        goBack() {
            this.$router.go(-1);
        }
    },
};
</script>
<style scoped>
.pageWrapper >>> .ivu-col-span-xs-8 {
    text-align: center !important;
}
.title {
    flex: 1 1 0%;
    text-align: left;
    margin-right: 20px;
    margin-bottom: 10px;
}
</style>
